/* =====================================================================
   LYMANKONG — 80 ANS DU LYCÉE
   Feuille de style dédiée. Utilise les variables du site (style.css)
   et ne modifie aucun style existant : toutes les classes sont préfixées "a80-".
   ===================================================================== */

:root {
    --a80-gold: #f4c542;
    --a80-gold-soft: rgba(244, 197, 66, 0.14);
    --a80-gold-line: rgba(244, 197, 66, 0.35);
    --a80-ink: #f5f3ea;
    --a80-ink-soft: #cfd3e6;
    --a80-surface: rgba(14, 20, 92, 0.55);
    --a80-surface-strong: rgba(10, 17, 114, 0.82);
    --a80-border: rgba(244, 197, 66, 0.22);
    --a80-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --a80-radius: 18px;
    --a80-radius-sm: 12px;
}

body.light-mode {
    --a80-gold: #b8860b;
    --a80-gold-soft: rgba(184, 134, 11, 0.10);
    --a80-gold-line: rgba(184, 134, 11, 0.35);
    --a80-ink: #14183d;
    --a80-ink-soft: #4a4f6e;
    --a80-surface: rgba(255, 255, 255, 0.92);
    --a80-surface-strong: #ffffff;
    --a80-border: rgba(10, 17, 114, 0.12);
    --a80-shadow: 0 18px 44px rgba(10, 17, 114, 0.12);
}

/* ---------- Utilitaires ---------- */
.a80-container { width: min(1180px, 100%); margin: 0 auto; }
.a80-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-accent, 'Poppins', sans-serif);
    font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--a80-gold);
}
.a80-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--a80-gold); border-radius: 2px; }
.a80-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    color: var(--a80-ink); line-height: 1.15; margin: .4rem 0 1rem;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
}
.a80-lead { color: var(--a80-ink-soft); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 720px; line-height: 1.75; }
.a80-center { text-align: center; }
.a80-center .a80-lead { margin-left: auto; margin-right: auto; }
.a80-center .a80-eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--a80-gold); border-radius: 2px; }
.a80-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.a80-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .85rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
    border: 2px solid var(--a80-gold); color: var(--a80-gold); background: transparent;
    cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
    font-family: var(--font-accent, 'Poppins', sans-serif);
}
.a80-btn:hover, .a80-btn:focus-visible { background: var(--a80-gold); color: #0a1172; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(244, 197, 66, .28); }
.a80-btn--solid { background: var(--a80-gold); color: #0a1172; }
.a80-btn--solid:hover { filter: brightness(1.06); }
body.light-mode .a80-btn:hover, body.light-mode .a80-btn--solid { color: #fff; }
.a80-btn:focus-visible, .a80-select:focus-visible, .a80-tab:focus-visible { outline: 3px solid var(--a80-gold-line); outline-offset: 3px; }

/* ---------- Emblème 80 ans (logo + main) ---------- */
.a80-emblem {
    position: relative; display: inline-block; width: clamp(170px, 24vw, 250px); aspect-ratio: 1;
    border-radius: 50%; cursor: pointer; text-decoration: none; isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.a80-emblem:hover, .a80-emblem:focus-visible { transform: scale(1.04) rotate(-2deg); }
.a80-emblem::before {
    content: ''; position: absolute; inset: 2%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(244,197,66,.55), rgba(244,197,66,0) 70%);
    animation: a80-glow 3.2s ease-in-out infinite;
}
.a80-emblem img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
body.light-mode .a80-emblem img { filter: drop-shadow(0 14px 26px rgba(10,17,114,.25)); }
@keyframes a80-glow { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.12); opacity: .9; } }
/* Emblème de secours (si le fichier logo est absent) */
.a80-emblem__fallback {
    display: none; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #1b2499, #070b4a 72%);
    box-shadow: 0 0 0 4px rgba(244,197,66,.6), var(--a80-shadow);
    color: #f4c542; text-align: center; flex-direction: column; align-items: center; justify-content: center;
}
.a80-emblem.is-fallback img { display: none; }
.a80-emblem.is-fallback .a80-emblem__fallback { display: flex; }
.a80-emblem__fallback strong { font-family: var(--font-heading, serif); font-size: clamp(3.2rem, 7vw, 4.8rem); line-height: .9; }
.a80-emblem__fallback span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-top: .3rem; }
.a80-emblem__fallback small { font-size: .68rem; color: rgba(255,255,255,.75); margin-top: .2rem; }

.a80-hand {
    position: absolute; right: -14px; bottom: -6px; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.45rem; color: #0a1172;
    background: var(--a80-gold); box-shadow: 0 8px 22px rgba(0,0,0,.35);
    animation: a80-tap 1.6s ease-in-out infinite; pointer-events: none;
}
.a80-hand svg { width: 26px; height: 26px; transform: rotate(-20deg); }
.a80-hand::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--a80-gold);
    animation: a80-ripple 1.6s ease-out infinite;
}
.a80-hand-label {
    position: absolute; left: 50%; bottom: -2.4rem; transform: translateX(-50%); white-space: nowrap;
    font-size: .8rem; font-weight: 600; color: var(--a80-gold); letter-spacing: .04em;
}

@keyframes a80-spin { to { transform: rotate(360deg); } }
@keyframes a80-tap { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 50% { transform: translate(-6px, -8px) rotate(-12deg) scale(.92); } }
@keyframes a80-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- Compte à rebours ---------- */
.a80-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.6vw, 1rem); width: min(520px, 100%); }
.a80-countdown__cell {
    background: var(--a80-surface); border: 1px solid var(--a80-border); border-radius: var(--a80-radius-sm);
    padding: clamp(.7rem, 2vw, 1.1rem) .3rem; text-align: center; backdrop-filter: blur(8px);
}
.a80-countdown__num {
    display: block; font-family: var(--font-heading, serif); font-weight: 800; color: var(--a80-gold);
    font-size: clamp(1.7rem, 4.6vw, 2.7rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.a80-countdown__label { display: block; margin-top: .4rem; font-size: clamp(.66rem, 1.4vw, .78rem); letter-spacing: .14em; text-transform: uppercase; color: var(--a80-ink-soft); }
.a80-countdown-meta { margin-top: .9rem; color: var(--a80-ink-soft); font-size: .92rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.a80-countdown-meta i { color: var(--a80-gold); margin-right: .35rem; }
.a80-badge-provisoire {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px;
    background: var(--a80-gold-soft); color: var(--a80-gold); font-size: .75rem; font-weight: 600; border: 1px solid var(--a80-gold-line);
}
.a80-countdown-done { font-family: var(--font-heading, serif); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--a80-gold); }

/* ---------- Bloc d'accueil (index.html) ---------- */
.a80-home {
    padding: clamp(60px, 8vw, 90px) 6% !important;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(244,197,66,.12), transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(65,105,225,.18), transparent 55%),
        var(--bg-secondary);
    border-top: 1px solid var(--a80-border); border-bottom: 1px solid var(--a80-border);
    overflow: hidden;
}
.a80-home__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.a80-home__emblem { display: flex; flex-direction: column; align-items: center; padding-bottom: 2.4rem; }
.a80-home__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---------- Pages 80 ans : héros ---------- */
body.a80-page { background: var(--bg-primary); }
.a80-hero {
    position: relative; padding: clamp(120px, 14vw, 150px) 6% clamp(60px, 7vw, 80px) !important;
    background:
        linear-gradient(180deg, rgba(5,8,48,.78), rgba(5,8,48,.92)),
        url('../images/psentation-lycée.jpg') center/cover no-repeat;
    color: #fff; overflow: hidden;
}
body.light-mode .a80-hero {
    background:
        linear-gradient(180deg, rgba(10,17,114,.80), rgba(10,17,114,.90)),
        url('../images/psentation-lycée.jpg') center/cover no-repeat;
}
.a80-hero .a80-title, .a80-hero .a80-lead { color: #fff; }
.a80-hero .a80-lead { color: rgba(255,255,255,.86); }
.a80-hero .a80-eyebrow { color: #f4c542; }
.a80-hero .a80-eyebrow::before, .a80-hero .a80-eyebrow::after { background: #f4c542; }
.a80-hero .a80-countdown__cell { background: rgba(255,255,255,.08); border-color: rgba(244,197,66,.3); }
.a80-hero .a80-countdown__num { color: #f4c542; }
.a80-hero .a80-countdown__label, .a80-hero .a80-countdown-meta { color: rgba(255,255,255,.82); }
.a80-hero .a80-badge-provisoire { color: #f4c542; background: rgba(244,197,66,.14); border-color: rgba(244,197,66,.4); }
.a80-hero .a80-btn { color: #f4c542; border-color: #f4c542; }
.a80-hero .a80-btn:hover, .a80-hero .a80-btn--solid { background: #f4c542; color: #0a1172; }
.a80-hero__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.a80-hero--compact .a80-hero__grid { grid-template-columns: 1fr; }
.a80-hero__emblem { display: flex; justify-content: center; }
.a80-hero__emblem .a80-emblem { width: clamp(150px, 20vw, 210px); }

.a80-breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: .8rem; }
.a80-breadcrumb a { color: #f4c542; text-transform: none !important; letter-spacing: normal !important; font-weight: 500 !important; font-size: .85rem !important; padding: 0 !important; }
.a80-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Navigation des 3 pages ---------- */
.a80-tabs-wrap { position: sticky; top: 70px; z-index: 50; padding: 0 6% !important; margin-top: -28px; }
.a80-tabs {
    display: flex; gap: .4rem; padding: .4rem; border-radius: 999px; width: max-content; max-width: 100%; margin: 0 auto;
    background: var(--a80-surface-strong); border: 1px solid var(--a80-border); box-shadow: var(--a80-shadow);
    overflow-x: auto; scrollbar-width: none;
}
.a80-tabs::-webkit-scrollbar { display: none; }
.a80-tab {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    padding: .7rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
    color: var(--a80-ink-soft); transition: background .25s ease, color .25s ease;
    font-family: var(--font-accent, 'Poppins', sans-serif);
}
.a80-tab:hover { color: var(--a80-ink); background: var(--a80-gold-soft); }
.a80-tab.is-active { background: var(--a80-gold); color: #0a1172; }
body.light-mode .a80-tab.is-active { color: #fff; }

/* ---------- Sections ---------- */
.a80-section { padding: clamp(56px, 7vw, 90px) 6% !important; }
.a80-section--alt { background: var(--bg-secondary); }

/* Cartes des 3 rubriques (page d'accueil 80 ans) */
.a80-portals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); margin-top: 2.4rem; }
.a80-portal {
    position: relative; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--a80-radius); background: var(--a80-surface); border: 1px solid var(--a80-border);
    box-shadow: var(--a80-shadow); color: var(--a80-ink); overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}
.a80-portal::after {
    content: ''; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, var(--a80-gold-soft), transparent 70%); transition: transform .4s ease;
}
.a80-portal:hover { transform: translateY(-6px); border-color: var(--a80-gold-line); }
.a80-portal:hover::after { transform: scale(1.3); }
.a80-portal__icon {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem;
    background: var(--a80-gold-soft); color: var(--a80-gold); border: 1px solid var(--a80-gold-line);
}
.a80-portal h3 { font-size: 1.35rem; color: var(--a80-ink); margin: 0; }
.a80-portal p { color: var(--a80-ink-soft); margin: 0; line-height: 1.65; flex: 1; }
.a80-portal__more { color: var(--a80-gold); font-weight: 600; display: inline-flex; align-items: center; gap: .45rem; }
.a80-portal:hover .a80-portal__more i { transform: translateX(4px); }
.a80-portal__more i { transition: transform .25s ease; }

/* ---------- Sélecteur (liste déroulante) ---------- */
.a80-picker {
    display: grid; grid-template-columns: 1fr; gap: 1rem; padding: clamp(1.2rem, 3vw, 1.8rem);
    border-radius: var(--a80-radius); background: var(--a80-surface); border: 1px solid var(--a80-border); box-shadow: var(--a80-shadow);
}
.a80-picker label { font-weight: 600; color: var(--a80-ink); font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.a80-picker label i { color: var(--a80-gold); }
.a80-select-wrap { position: relative; }
.a80-select-wrap::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 1.1rem; top: 50%;
    transform: translateY(-50%); color: var(--a80-gold); pointer-events: none; font-size: .85rem;
}
.a80-select {
    width: 100%; appearance: none; -webkit-appearance: none; padding: 1rem 3rem 1rem 1.1rem; border-radius: var(--a80-radius-sm);
    border: 1px solid var(--a80-border); background: var(--input-bg, rgba(255,255,255,.08)); color: var(--a80-ink);
    font-size: 1rem; font-family: inherit; cursor: pointer;
}
.a80-select option { color: #14183d; background: #fff; }
.a80-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.a80-chip {
    padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--a80-border); background: transparent;
    color: var(--a80-ink-soft); font-size: .86rem; font-weight: 500; cursor: pointer; font-family: inherit;
    transition: all .2s ease;
}
.a80-chip:hover { border-color: var(--a80-gold-line); color: var(--a80-ink); }
.a80-chip.is-active { background: var(--a80-gold); border-color: var(--a80-gold); color: #0a1172; font-weight: 600; }
body.light-mode .a80-chip.is-active { color: #fff; }

/* En-tête du groupe sélectionné */
.a80-group-head {
    display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; margin: 2.2rem 0 1.6rem;
    padding-bottom: 1.4rem; border-bottom: 1px solid var(--a80-border);
}
.a80-group-head__mark {
    width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, #0a1172, #4169e1); color: #f4c542; font-size: 1.6rem; border: 2px solid var(--a80-gold-line);
}
.a80-group-head__mark img { width: 100%; height: 100%; object-fit: cover; }
.a80-group-head h2 { margin: 0 0 .3rem; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--a80-ink); }
.a80-group-head p { margin: 0; color: var(--a80-ink-soft); line-height: 1.7; }

/* ---------- Publications ---------- */
.a80-feed { display: grid; gap: clamp(1.2rem, 2.6vw, 1.8rem); }
.a80-post {
    border-radius: var(--a80-radius); background: var(--a80-surface); border: 1px solid var(--a80-border);
    box-shadow: var(--a80-shadow); overflow: hidden;
}
.a80-post__body { padding: clamp(1.2rem, 3vw, 2rem); }
.a80-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; font-size: .84rem; color: var(--a80-ink-soft); margin-bottom: .7rem; }
.a80-post__meta i { color: var(--a80-gold); margin-right: .3rem; }
.a80-post__pin { color: var(--a80-gold); font-weight: 600; }
.a80-post h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--a80-ink); margin: 0 0 .8rem; }
.a80-post__text { color: var(--a80-ink-soft); line-height: 1.8; font-size: 1rem; }
.a80-post__text p { margin: 0 0 .9rem; }
.a80-post__text p:last-child { margin-bottom: 0; }
.a80-post__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.a80-readmore { margin-top: .8rem; background: none; border: 0; color: var(--a80-gold); font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; font-size: .92rem; }

.a80-media { display: grid; gap: .5rem; padding: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); }
.a80-media--1 { grid-template-columns: 1fr; }
.a80-media--2 { grid-template-columns: repeat(2, 1fr); }
.a80-media--many { grid-template-columns: repeat(3, 1fr); }
.a80-media__item { position: relative; border-radius: var(--a80-radius-sm); overflow: hidden; background: #050830; aspect-ratio: 4 / 3; }
.a80-media--1 .a80-media__item { aspect-ratio: 16 / 9; }
.a80-media__item img, .a80-media__item video, .a80-media__item iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.a80-media__item video { object-fit: contain; background: #000; }
.a80-media__item button { all: unset; cursor: zoom-in; display: block; width: 100%; height: 100%; }
.a80-media__item img { transition: transform .4s ease; }
.a80-media__item button:hover img { transform: scale(1.04); }
.a80-media__caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; font-size: .8rem; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.75)); pointer-events: none;
}
.a80-media__more {
    position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,8,48,.62);
    color: #fff; font-size: 1.6rem; font-weight: 700; pointer-events: none;
}

/* États vides / chargement */
.a80-empty {
    text-align: center; padding: clamp(2.4rem, 6vw, 4rem) 1.4rem; border-radius: var(--a80-radius);
    border: 1px dashed var(--a80-gold-line); background: var(--a80-gold-soft); color: var(--a80-ink-soft);
}
.a80-empty i { font-size: 2.2rem; color: var(--a80-gold); margin-bottom: .9rem; display: block; }
.a80-empty strong { display: block; color: var(--a80-ink); font-size: 1.1rem; margin-bottom: .4rem; }
.a80-skeleton { height: 220px; border-radius: var(--a80-radius); background: linear-gradient(90deg, var(--a80-surface) 0%, var(--a80-gold-soft) 50%, var(--a80-surface) 100%); background-size: 200% 100%; animation: a80-shimmer 1.4s infinite; }
@keyframes a80-shimmer { to { background-position: -200% 0; } }

/* Frise des générations (page d'accueil 80 ans) */
.a80-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 2rem; }
.a80-timeline a {
    padding: 1rem; border-radius: var(--a80-radius-sm); border: 1px solid var(--a80-border); background: var(--a80-surface);
    color: var(--a80-ink); font-weight: 600; text-align: center; transition: all .25s ease;
}
.a80-timeline a small { display: block; font-weight: 400; color: var(--a80-ink-soft); font-size: .78rem; margin-top: .25rem; }
.a80-timeline a:hover { border-color: var(--a80-gold); color: var(--a80-gold); transform: translateY(-3px); }

/* Lightbox */
.a80-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(3,5,30,.94); display: none; align-items: center; justify-content: center; padding: 4vw; }
.a80-lightbox.is-open { display: flex; }
.a80-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.a80-lightbox__caption { position: absolute; bottom: 4vh; left: 6vw; right: 6vw; text-align: center; color: #fff; font-size: .95rem; }
.a80-lightbox__btn {
    position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08); color: #fff; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.a80-lightbox__btn:hover { background: #f4c542; color: #0a1172; }
.a80-lightbox__close { top: 3vh; right: 3vw; }
.a80-lightbox__prev { left: 2vw; top: 50%; transform: translateY(-50%); }
.a80-lightbox__next { right: 2vw; top: 50%; transform: translateY(-50%); }

/* Lien admin discret */
.a80-admin-link { display: none; margin-top: 1rem; }
.a80-admin-link.is-visible { display: inline-flex; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .a80-portals { grid-template-columns: 1fr; }
    .a80-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a80-hero__grid { grid-template-columns: 1fr; text-align: center; }
    .a80-hero__grid .a80-lead { margin-left: auto; margin-right: auto; }
    .a80-hero__grid .a80-countdown, .a80-hero__grid .a80-countdown-meta { margin-left: auto; margin-right: auto; justify-content: center; }
    .a80-hero__emblem { order: -1; }
    .a80-hero .a80-breadcrumb { justify-content: center; }
    .a80-hero__actions { justify-content: center; }
}
@media (max-width: 760px) {
    .a80-home__grid { grid-template-columns: 1fr; text-align: center; }
    .a80-home__grid .a80-lead, .a80-home__grid .a80-countdown { margin-left: auto; margin-right: auto; }
    .a80-home__actions, .a80-home__grid .a80-countdown-meta { justify-content: center; }
    .a80-home .a80-eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--a80-gold); border-radius: 2px; }
    .a80-tabs-wrap { top: 62px; }
    .a80-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 18px; }
    .a80-tab { padding: .65rem .6rem; font-size: .82rem; justify-content: center; border-radius: 12px; }
    .a80-hero .a80-eyebrow::before, .a80-hero .a80-eyebrow::after { display: none; }
    .a80-media--many { grid-template-columns: repeat(2, 1fr); }
    .a80-group-head { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .a80-hand { width: 48px; height: 48px; right: -8px; } .a80-hand svg { width: 22px; height: 22px; }
}
@media (max-width: 420px) {
    .a80-media--2, .a80-media--many { grid-template-columns: 1fr; }
    .a80-countdown { gap: .4rem; }
    .a80-timeline { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .a80-emblem::before, .a80-hand, .a80-hand::after, .a80-skeleton { animation: none; }
}

/* =====================================================================
   ESPACE DE PUBLICATION (80ans-admin.html)
   ===================================================================== */
.a80-admin { padding: clamp(110px, 12vw, 130px) 5% 70px !important; }
.a80-admin__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.a80-admin__head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--a80-ink); margin: .3rem 0 0; }
.a80-admin__user { color: var(--a80-ink-soft); font-size: .9rem; }
.a80-admin__user strong { color: var(--a80-ink); }
.a80-admin__tabs { margin: 0 0 1.6rem; }
.a80-admin__tabs .a80-tabs { margin: 0; }
.a80-admin__tabs button.a80-tab { border: 0; background: transparent; cursor: pointer; }
.a80-admin__tabs button.a80-tab.is-active { background: var(--a80-gold); }
.a80-panel {
    background: var(--a80-surface); border: 1px solid var(--a80-border); border-radius: var(--a80-radius);
    box-shadow: var(--a80-shadow); padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1.6rem;
}
.a80-panel h2 { font-size: 1.35rem; color: var(--a80-ink); margin: 0 0 .4rem; }
.a80-panel > p.a80-help { margin: 0 0 1.4rem; }
.a80-help { color: var(--a80-ink-soft); font-size: .86rem; line-height: 1.6; }
.a80-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.a80-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.a80-field--full { grid-column: 1 / -1; }
.a80-field > span { font-weight: 600; font-size: .88rem; color: var(--a80-ink); }
.a80-field > span em { color: var(--a80-gold); font-style: normal; }
.a80-input, .a80-textarea, .a80-form .a80-select {
    width: 100%; padding: .8rem .95rem; border-radius: 10px; border: 1px solid var(--a80-border);
    background: var(--input-bg, rgba(255,255,255,.08)); color: var(--input-text, var(--a80-ink)); font-family: inherit; font-size: .95rem;
}
.a80-form .a80-select { padding-right: 2.6rem; }
.a80-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.a80-input:focus, .a80-textarea:focus, .a80-form .a80-select:focus { outline: 2px solid var(--a80-gold-line); border-color: var(--a80-gold); }
.a80-check { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--a80-ink); cursor: pointer; }
.a80-check input { width: 18px; height: 18px; accent-color: #f4c542; }
.a80-drop {
    border: 2px dashed var(--a80-gold-line); border-radius: 14px; padding: 1.4rem; text-align: center; color: var(--a80-ink-soft);
    background: var(--a80-gold-soft); cursor: pointer; transition: background .2s ease;
}
.a80-drop:hover, .a80-drop.is-over { background: rgba(244,197,66,.22); }
.a80-drop i { font-size: 1.8rem; color: var(--a80-gold); display: block; margin-bottom: .5rem; }
.a80-drop input { display: none; }
.a80-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.a80-thumb { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #050830; border: 1px solid var(--a80-border); }
.a80-thumb img, .a80-thumb video { width: 100%; height: 100%; object-fit: cover; }
.a80-thumb__type { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: .65rem; padding: 2px 6px; border-radius: 6px; }
.a80-thumb__remove {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(220, 53, 69, .92); color: #fff; font-size: .75rem; display: grid; place-items: center;
}
.a80-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .4rem; }
.a80-status { font-size: .92rem; font-weight: 500; }
.a80-status.is-ok { color: #38c172; }
.a80-status.is-err { color: #ff6b6b; }
.a80-status.is-info { color: var(--a80-gold); }
body.light-mode .a80-status.is-ok { color: #1e8e4e; }
body.light-mode .a80-status.is-err { color: #c62828; }

.a80-admin-list { display: grid; gap: .8rem; }
.a80-admin-row {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; padding: .8rem;
    border-radius: 12px; border: 1px solid var(--a80-border); background: var(--a80-surface-strong);
}
.a80-admin-row__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--a80-gold-soft); color: var(--a80-gold); }
.a80-admin-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.a80-admin-row h3 { font-size: 1rem; margin: 0 0 .25rem; color: var(--a80-ink); font-family: var(--font-body, sans-serif); font-weight: 600; }
.a80-admin-row small { color: var(--a80-ink-soft); display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.a80-tag { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--a80-gold-soft); color: var(--a80-gold); border: 1px solid var(--a80-gold-line); }
.a80-tag--off { background: rgba(255,107,107,.12); color: #ff6b6b; border-color: rgba(255,107,107,.35); }
.a80-admin-row__actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.a80-icon-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--a80-border); background: transparent;
    color: var(--a80-ink); cursor: pointer; display: grid; place-items: center; transition: all .2s ease;
}
.a80-icon-btn:hover { border-color: var(--a80-gold); color: var(--a80-gold); }
.a80-icon-btn--danger:hover { border-color: #ff6b6b; color: #ff6b6b; }
.a80-icon-btn--confirm { background: #dc3545; color: #fff; border-color: #dc3545; width: auto; padding: 0 .8rem; font-size: .8rem; font-weight: 600; }
.a80-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.a80-group-edit { border: 1px solid var(--a80-border); border-radius: 12px; padding: 1rem; margin-bottom: .8rem; }
.a80-group-edit summary { cursor: pointer; font-weight: 600; color: var(--a80-ink); display: flex; align-items: center; gap: .6rem; }
.a80-group-edit summary::marker { color: var(--a80-gold); }
.a80-group-edit .a80-form { margin-top: 1rem; }
.a80-gate { text-align: center; max-width: 560px; margin: 0 auto; }
.a80-gate i.fa-lock { font-size: 2.4rem; color: var(--a80-gold); margin-bottom: 1rem; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
    .a80-form { grid-template-columns: 1fr; }
    .a80-admin-row { grid-template-columns: 52px 1fr; }
    .a80-admin-row__thumb { width: 52px; height: 52px; }
    .a80-admin-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Logo 80 ans dans la bannière d'accueil (opposé à l'image de l'élève) ---------- */
.a80-hero-badge {
    position: absolute !important;
    right: 96px; /* laisse la place aux boutons flottants (thème, langue) */
    bottom: clamp(18px, 5vh, 48px);
    width: clamp(104px, 21vh, 210px);
    z-index: 12;
}
.a80-hero-badge .a80-hand-label {
    top: -1.7rem; bottom: auto; color: #f4c542; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.a80-hero-badge .a80-hand { right: -10px; bottom: -4px; width: 48px; height: 48px; }
.a80-hero-badge .a80-hand svg { width: 22px; height: 22px; }
.a80-home__grid--solo { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.a80-home__grid--solo .a80-lead, .a80-home__grid--solo .a80-countdown { margin-left: auto; margin-right: auto; }
.a80-home__grid--solo .a80-home__actions, .a80-home__grid--solo .a80-countdown-meta { justify-content: center; }
.a80-home__grid--solo .a80-eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--a80-gold); border-radius: 2px; }
@media (max-width: 760px) {
    .a80-hero-badge { width: clamp(84px, 24vw, 120px); right: 78px; bottom: 14px; }
    .a80-hero-badge .a80-hand { width: 36px; height: 36px; right: -6px; bottom: -2px; }
    .a80-hero-badge .a80-hand svg { width: 17px; height: 17px; }
    .a80-hero-badge .a80-hand-label { font-size: .7rem; top: -1.4rem; }
}
@media (min-width: 761px) and (max-width: 1024px) {
    .a80-hero-badge { width: min(21vh, 150px); bottom: 14px; }
}
@media (max-width: 400px) and (max-height: 700px) {
    .a80-hero-badge { width: 52px; right: 4px; bottom: 72px; }
    .a80-hero-badge .a80-hand { width: 24px; height: 24px; right: -4px; bottom: -2px; }
    .a80-hero-badge .a80-hand svg { width: 12px; height: 12px; }
    .a80-hero-badge .a80-hand-label { display: none; }
}

/* ---------- Thème officiel des 80 ans ---------- */
.a80-theme {
    display: inline-flex; flex-direction: column; gap: .25rem; margin: .2rem 0 1.2rem;
    padding: .9rem 1.3rem; border-left: 3px solid var(--a80-gold); border-radius: 0 12px 12px 0;
    background: var(--a80-gold-soft);
}
.a80-theme__label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--a80-gold); }
.a80-theme__main { font-family: var(--font-heading, serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--a80-ink); line-height: 1.3; }
.a80-theme__sub { font-style: italic; color: var(--a80-ink-soft); font-size: clamp(.98rem, 1.8vw, 1.1rem); }
.a80-home__grid--solo .a80-theme { border-left: 0; border-top: 3px solid var(--a80-gold); border-radius: 0 0 12px 12px; align-items: center; text-align: center; }
.a80-theme-inline { margin: -.3rem 0 1rem; font-family: var(--font-heading, serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); color: #f4c542; }
.a80-theme-inline i { font-size: .8em; opacity: .8; margin-right: .2rem; }
.a80-theme-inline--big { font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
@media (max-width: 980px) { .a80-hero .a80-theme-inline { text-align: center; } }

/* Logo de secours dans le bloc 80 ans (très petits écrans où la bannière n'a pas de place) */
.a80-home-mini { width: 140px; margin: 0 auto 1.2rem; }
.a80-home-mini[hidden] { display: none !important; }

/* =====================================================================
   VIDÉOS : lecteur compact façon YouTube + agrandissement
   ===================================================================== */
.a80-videos { display: grid; grid-template-columns: minmax(0, 560px); gap: 1rem 1.2rem; padding: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); }
.a80-videos--many { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.a80-video { margin: 0; }
.a80-video__frame {
    position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.a80-video.is-portrait .a80-video__frame { aspect-ratio: 16 / 9; }
.a80-video__frame video, .a80-video__frame iframe, .a80-video__thumb {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000;
}
.a80-video__thumb { object-fit: cover; }
.a80-video__play {
    position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; padding: 0; border: 0; background: none;
    cursor: pointer; z-index: 2; transition: transform .2s ease;
}
.a80-video__play .a80-video__play-bg { fill: rgba(33, 33, 33, .82); transition: fill .2s ease; }
.a80-video__frame:hover .a80-video__play .a80-video__play-bg,
.a80-video__play:focus-visible .a80-video__play-bg { fill: #e62117; }
.a80-video__play:hover { transform: scale(1.06); }
.a80-video__play:focus-visible { outline: 3px solid #f4c542; outline-offset: 4px; border-radius: 12px; }
.a80-video__time {
    position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 6px; border-radius: 4px;
    background: rgba(0, 0, 0, .8); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
    font-variant-numeric: tabular-nums; pointer-events: none;
}
.a80-video__time:empty { display: none; }
.a80-video__expand {
    position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border-radius: 8px; border: 0;
    background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; display: grid; place-items: center;
    opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.a80-video__frame:hover .a80-video__expand, .a80-video__expand:focus-visible { opacity: 1; }
.a80-video__expand:hover { background: rgba(0, 0, 0, .85); }
@media (hover: none) { .a80-video__expand { opacity: 1; } }
/* Pendant la lecture : on laisse la place aux commandes natives */
.a80-video.is-playing .a80-video__play, .a80-video.is-playing .a80-video__time { display: none; }
.a80-video.is-playing .a80-video__expand { top: 8px; }
.a80-video__caption { margin: .55rem .1rem 0; font-size: .9rem; color: var(--a80-ink-soft); line-height: 1.5; }

/* Fenêtre d'agrandissement */
.a80-player {
    position: fixed; inset: 0; z-index: 3100; display: none; align-items: center; justify-content: center;
    padding: clamp(12px, 4vw, 48px); background: rgba(3, 5, 30, .92);
}
.a80-player.is-open { display: flex; }
.a80-player__box { position: relative; width: min(1100px, 100%); }
.a80-player__stage { position: relative; aspect-ratio: 16 / 9; max-height: 82vh; margin: 0 auto; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.a80-player__stage video, .a80-player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.a80-player__close {
    position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
    display: grid; place-items: center;
}
.a80-player__close:hover, .a80-player__close:focus-visible { background: #f4c542; color: #0a1172; }
@media (max-width: 600px) {
    .a80-videos { grid-template-columns: 1fr; }
    .a80-player__close { top: -50px; }
}

/* ---------- Vidéos en liste compacte (vignette + titre) ---------- */
.a80-vlist { list-style: none; margin: 0; padding: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); display: grid; gap: .6rem; max-width: 640px; }
.a80-vrow {
    width: 100%; display: flex; align-items: center; gap: .9rem; padding: .5rem; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--a80-border); background: var(--a80-surface-strong); color: var(--a80-ink); text-align: left;
    font: inherit; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.a80-vrow:hover { border-color: var(--a80-gold-line); background: var(--a80-gold-soft); transform: translateX(3px); }
.a80-vrow:focus-visible { outline: 3px solid var(--a80-gold-line); outline-offset: 2px; }
.a80-vrow__thumb {
    position: relative; flex: 0 0 128px; width: 128px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000;
}
.a80-vrow__thumb video, .a80-vrow__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.a80-vrow__icon {
    position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(0, 0, 0, .62); color: #fff; transition: background .2s ease, transform .2s ease;
}
.a80-vrow__icon svg { width: 16px; height: 16px; margin-left: 2px; }
.a80-vrow:hover .a80-vrow__icon { background: #e62117; transform: scale(1.08); }
.a80-vrow__time {
    position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .82);
    color: #fff; font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.a80-vrow__time:empty { display: none; }
.a80-vrow__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.a80-vrow__title { font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--a80-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a80-vrow__meta { font-size: .8rem; color: var(--a80-ink-soft); }
.a80-vrow__meta i { color: #e62117; }
.a80-vrow__meta span[data-i18n="a80_watch"] { color: var(--a80-gold); font-weight: 600; }
@media (max-width: 420px) {
    .a80-vrow__thumb { flex-basis: 104px; width: 104px; }
    .a80-vrow__title { font-size: .9rem; }
}